<script setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { useTeacherStore } from '@/stores/modules/teacherStore.js';

const teacherStore = useTeacherStore();
const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;
</script>

<template>
    <div class="container">
        <header class="header">
            <img :src="PUBLIC_URL + '/head-normal.jpg'" class="header__img" />
            <h2>{{ teacherStore.teacherName }}</h2>
            <div>工号:{{ teacherStore.teacherId }}</div>
            <div v-if="teacherStore.className" class="class">
                所带班级:{{ teacherStore.className }}
            </div>
        </header>
        <section class="card setInfo">
            <span>修改信息</span>
            <span>
                <el-icon><ArrowRight /></el-icon>
            </span>
        </section>
        <section class="card">
            <p>技术支持: 申翼特</p>
            <p>联系电话: 13662685556</p>
            <p>邮箱: 20830862@qq.com</p>
        </section>
    </div>
</template>

<style lang="scss" scoped>
.container {
    font-size: 18rem;
    background-color: rgb(247, 247, 247);
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(#fdc28b, #ff8615);
    height: 190rem;
    color: white;

    &__img {
        width: 74rem;
        height: 74rem;
        border-radius: 32rem;
        margin: 14rem 0;
    }

    h2 {
        font-size: 24rem;
        font-weight: bold;
    }

    div {
        margin: 4rem;
    }
}

.card {
    width: 88%;
    border-radius: 10px;
    box-shadow: 1px 1px 20px #ccc;
    min-height: 50rem;
    margin: 20rem auto;
    padding: 20rem;

    p:not(:last-child) {
        margin-bottom: 20rem;
    }
}

.setInfo {
    display: flex;
    justify-content: space-between;

    .icon {
        width: 20rem;
        height: 20rem;
        font-size: 20rem;
        color: #000;
    }
}

.class {
    max-width: 220rem;
}
</style>
